<template>
  <div>
    <MyTable :data="list">
      <!--3。通过template #插槽名="变量名”接收-->
      <template #default="obj">
        <!--{{ obj }} 显示传过来的obj-->
        <button @click="del(obj.row.id)">删除</button>
      </template>
    </MyTable>

    <MyTable :data="list2">
      <template #default="obj">
        <button @click="show(obj.row)">查看</button>
      </template>
    </MyTable>
  </div>
</template>

<script>
/*
插槽分类: 
  默认插槽(组件内定制一处结构) 
  具名插槽(组件内定制多处结构)
*************************************
作用域插槽:是插槽的一个传参语法
  插槽 - 作用域插槽
    作用域插槽: 定义 slot 插槽的同时,是可以传值的。给 插槽 上可以 绑定数据，将来 使用组件时可以用
    场景:封装表格组件
      1. 父传子，动态渲染表格内容
      2. 利用默认插槽，定制操作列
        <MyTable :list="list">
          <button>删除</button>
        </MyTable>

        <MyTable :list="list2">
          <button>查看</button>
        </MyTable>
      3. 删除或查看都需要用到 当前项的 id，属于 组件内部的数据
        通过 作用域插槽 传值绑定，进而使用
  ******************************************************
  基本使用步骤
    1.给slot标签以添加属性的方式传值
      <slot :id="item.id” msg="测试文本"></slot>
    2.所有添加的属性，都会被收集到一个对象中
      { id:3，msg:测试文本' }
    3.在template中,通过  #插槽名="obj" 接收，默认插槽名为 default
      <MyTable :list="list">
        <template #default="obj">
          <button @click="del(obj.id)">删除</button>
        </template>
      </MyTable>
     
*/


import MyTable from './components/MyTable.vue'
export default {
  data () {
    return {
      list: [
        { id: 1, name: '张小花', age: 18 },
        { id: 2, name: '孙大明', age: 19 },
        { id: 3, name: '刘德忠', age: 17 },
      ],
      list2: [
        { id: 1, name: '赵小云', age: 18 },
        { id: 2, name: '刘蓓蓓', age: 19 },
        { id: 3, name: '姜肖泰', age: 17 },
      ]
    }
  },
  components: {
    MyTable
  },
  methods: {
    del(id) {
      this.list = this.list.filter(item => item.id !== id)
    },
    show(row) {
      alert(`姓名:${row.name}, 年龄:${row.age}`)
    },
  }
}
</script>
